<template>
  <div class="about">
    <h1 class="page-title">{{ $t('nav.about') }}</h1>

    <!-- 个人简介部分 -->
    <section class="about-intro">
      <div class="about-content">
        <div class="about-text">
          <h2>{{ $t('about.whoAmI') }}</h2>
          <p>{{ $t('about.intro1') }}</p>
          <p>{{ $t('about.intro2') }}</p>
          <div class="about-stats">
            <div class="stat-item">
              <div class="stat-number">5+</div>
              <div class="stat-label">{{ $t('about.yearsExperience') }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">50+</div>
              <div class="stat-label">{{ $t('about.projectsCompleted') }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">20+</div>
              <div class="stat-label">{{ $t('about.happyClients') }}</div>
            </div>
          </div>
        </div>
        <div class="about-image">
          <!-- 
            提示：将此占位图替换为你的个人照片
            1. 在src/assets目录下添加你的照片
            2. 将下面的src改为：@/assets/你的图片名称
          -->
          <img
            src="https://q8.itc.cn/q_70/images03/20241030/7e4e379bf5b84b6c9fb4a9fec3102d5d.jpeg"
            alt="About Me"
          />
        </div>
      </div>
    </section>

    <!-- 技能部分 -->
    <section class="about-skills">
      <h2 class="section-title">{{ $t('about.mySkills') }}</h2>
      <div class="skills-container">
        <div class="skills-category">
          <h3>{{ $t('about.technical') }}</h3>
          <div class="skill-bars">
            <div class="skill-item" v-for="skill in technicalSkills" :key="skill.name">
              <div class="skill-info">
                <span class="skill-name">{{ skill.name }}</span>
                <span class="skill-percentage">{{ skill.level }}%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" :style="{ width: `${skill.level}%` }"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="skills-category">
          <h3>{{ $t('about.professional') }}</h3>
          <div class="skill-bars">
            <div class="skill-item" v-for="skill in professionalSkills" :key="skill.name">
              <div class="skill-info">
                <span class="skill-name">{{ skill.name }}</span>
                <span class="skill-percentage">{{ skill.level }}%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" :style="{ width: `${skill.level}%` }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 经历时间线 -->
    <section class="about-timeline">
      <h2 class="section-title">{{ $t('about.experience') }}</h2>
      <!-- Work Experience Timeline -->
      <el-timeline>
        <el-timeline-item
          v-for="(experience, index) in experiences"
          :key="index"
          :timestamp="experience.period"
          placement="top"
          :type="index === 0 ? 'primary' : undefined"
        >
          <el-card>
            <h3>{{ experience.title }}</h3>
            <h4>{{ experience.company }}</h4>
            <p>{{ experience.description }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </section>

    <!-- 教育背景 -->
    <section class="about-education">
      <h2 class="section-title">{{ $t('about.education') }}</h2>
      <!-- Education Timeline -->
      <el-timeline>
        <el-timeline-item
          v-for="(education, index) in educations"
          :key="index"
          :timestamp="education.period"
          placement="top"
          :type="index === 0 ? 'primary' : undefined"
        >
          <el-card>
            <h3>{{ education.degree }}</h3>
            <h4>{{ education.institution }}</h4>
            <p>{{ education.description }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </section>

    <!-- 下载简历 -->
    <section class="about-resume">
      <div class="resume-container">
        <h2>{{ $t('about.downloadResume') }}</h2>
        <p>{{ $t('about.resumeText') }}</p>
        <el-button type="primary" size="large">
          <el-icon><Download /></el-icon>
          {{ $t('about.downloadCV') }}
        </el-button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Download } from '@element-plus/icons-vue'

// 技术技能数据
const technicalSkills = [
  { name: 'HTML/CSS', level: 95 },
  { name: 'JavaScript/TypeScript', level: 90 },
  { name: 'Vue.js', level: 92 },
  { name: 'React', level: 85 },
  { name: 'Node.js', level: 80 },
  { name: 'Python', level: 75 },
]

// 专业技能数据
const professionalSkills = [
  { name: '项目管理', level: 85 },
  { name: 'UI/UX设计', level: 80 },
  { name: '团队协作', level: 90 },
  { name: '问题解决', level: 95 },
  { name: '沟通能力', level: 88 },
]

// 工作经历数据
const experiences = [
  {
    title: '高级前端开发工程师',
    company: 'ABC科技有限公司',
    period: '2021 - 至今',
    description:
      '负责公司核心产品的前端架构设计和开发，优化用户体验和性能，带领前端团队实施最佳实践。',
  },
  {
    title: '前端开发工程师',
    company: 'XYZ互联网公司',
    period: '2018 - 2021',
    description:
      '参与多个Web应用项目的开发，使用Vue.js和React构建响应式用户界面，与后端团队协作实现功能需求。',
  },
  {
    title: '初级开发工程师',
    company: '创新科技初创公司',
    period: '2016 - 2018',
    description: '参与公司产品的前端开发，学习并应用现代Web开发技术，协助优化网站性能和用户体验。',
  },
]

// 教育背景数据
const educations = [
  {
    degree: '计算机科学硕士',
    institution: '某知名大学',
    period: '2014 - 2016',
    description: '专注于Web开发和人机交互设计，参与多个研究项目，获得优秀毕业生称号。',
  },
  {
    degree: '计算机科学学士',
    institution: '某大学',
    period: '2010 - 2014',
    description: '学习计算机科学基础理论和实践，参与多个课程项目，获得优秀学生奖学金。',
  },
]
</script>

<style scoped>
.about {
  padding: 40px 0;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* 个人简介部分 */
.about-intro {
  margin-bottom: 60px;
}

.about-content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--el-color-primary);
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--el-text-color-regular);
}

.about-stats {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--el-color-primary);
}

.stat-label {
  font-size: 1rem;
  color: var(--el-text-color-secondary);
}

.about-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 技能部分 */
.about-skills {
  padding: 60px 0;
  background-color: var(--el-bg-color-page);
}

.skills-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.skills-category h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--el-text-color-primary);
}

.skill-item {
  margin-bottom: 20px;
}

.skill-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skill-name {
  font-weight: 500;
}

.skill-percentage {
  color: var(--el-color-primary);
}

.skill-bar {
  height: 8px;
  background-color: var(--el-border-color-lighter);
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background-color: var(--el-color-primary);
  border-radius: 4px;
  transition: width 1s ease;
}

/* 时间线部分 */
.about-timeline,
.about-education {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}

.el-timeline-item h3 {
  font-size: 1.3rem;
  margin: 0 0 5px 0;
  color: var(--el-color-primary);
}

.el-timeline-item h4 {
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  color: var(--el-text-color-secondary);
  font-weight: normal;
}

.el-timeline-item p {
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

/* 简历下载部分 */
.about-resume {
  background-color: var(--el-bg-color-page);
  padding: 60px 0;
  text-align: center;
}

.resume-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

.resume-container h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.resume-container p {
  color: var(--el-text-color-regular);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-content,
  .skills-container {
    grid-template-columns: 1fr;
  }

  .about-stats {
    justify-content: space-around;
  }

  .about-image {
    order: -1;
    margin-bottom: 30px;
  }
}
</style>
